<template>
   <div class="from">
      <div class="log">
         <router-link to="/">
            <div class="log-img"></div>
         </router-link>
      </div>
      <div class="register-content">
         <div class="register-img">
            <div class="content">
               <div>
                  <div class="register">
                     <h1>注册账号</h1>
                     <ul>
                        <li>
                           <i v-show="!isUserShow" class="el-icon-star-on"></i>
                           <div>
                              <label for="user">用户名</label>
                           </div>
                           <el-input
                              class="input"
                              id="user"
                              placeholder="请输入用户名"
                              v-model="userName"
                              @blur="_validateUser('isUserName')"
                              @focus="_focus('user')"
                              clearable>
                           </el-input>
                           <div class="icons">
                              <span v-show="isUserShow" class="el-icon-success"></span>
                           </div>
                           <div class="Prompt" v-if="isUserNameDisplay">
                              <span>{{userNamePrompt}}</span>
                           </div>
                           <div class="Prompt" v-else-if="isQueryUserNameDisplay">
                              <span>用户名已存在</span>
                           </div>
                        </li>
                        <li>
                           <i v-show="!isPasswordShow" class="el-icon-star-on"></i>
                           <div>
                              <label for="password">请输入密码</label>
                           </div>
                           <el-input
                              class="input border"
                              id="password"
                              type="password"
                              placeholder="请输入密码"
                              v-model="password"
                              @blur="_validatePassword('isPassword')"
                              @focus="_focus('password')"
                              clearable>
                           </el-input>
                           <div class="icons">
                              <span v-show="isPasswordShow" class="el-icon-success"></span>
                           </div>
                           <div class="Prompt" v-if="isPasswordDisplay">
                              <span>{{passwordPrompt}}</span>
                           </div>
                        </li>


                        <li>
                           <i v-show="!isEmailShow" class="el-icon-star-on"></i>
                           <div>
                              <label for="email">输入邮箱</label>
                           </div>
                           <el-input
                              class="input"
                              id="email"
                              type="email"
                              placeholder="请输入邮箱"
                              v-model="email"
                              @blur="_validateEmail('isEmail')"
                              @focus="_focus('email')"
                              clearable>
                           </el-input>

                           <div class="icons">
                              <span v-show="isEmailShow" class="el-icon-success"></span>
                           </div>
                           <div class="Prompt" v-if="isEmailDisplay">
                              <span>{{emailPrompt}}</span>
                           </div>
                        </li>


                        <li>
                           <i v-show="!isDateShow" class="el-icon-star-on"></i>
                           <div>
                              <label>出生年月日</label>
                           </div>
                           <el-date-picker
                              class="input"
                              v-model="date"
                              type="date"
                              placeholder="选择日期"
                              @blur="__validateDate"
                              :clearable="false"
                           >
                           </el-date-picker>
                           <div class="icons">
                              <span v-show="isDateShow || isDate" class="el-icon-success"></span>
                           </div>
                           <div class="Prompt" v-if="isDateDisplay">
                              <span>{{datePrompt}}</span>
                           </div>
                        </li>
                     </ul>
                     <div class="slider">
                        <verifgying-slider ref="slider"
                                           @slider="_sliderEmit"
                        ></verifgying-slider>
                     </div>
                     <div class="btn">
                        <el-button class="btn_login"
                                   type="primary"
                                   :disabled="disabled"
                                   @click="_submit"
                        >注册
                        </el-button>
                        <router-link to="/login">
                           <el-button class="btn_login" type="success">已有账号</el-button>
                        </router-link>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <m-footer></m-footer>
      </div>
      <template>
         <el-button closeOnClickModal="true" type="text" @click="open2" v-show="false">fdsff</el-button>
      </template>
   </div>
</template>

<script>
   import MFooter from '../meizu-footer-wrap/meizu-footer-wrap'
   import verifgyingSlider from '../Verifying-slider/Verifying-slider'
   import {validates} from '../../assets/util/util'
   import model from '../../components/Modal-Frame-Box/Modal-Frame-Box'

   export default {
      name: 'loginBox',
      data() {
         return {
            userName: '',
            password: '',
            email: '',
            date: '',
            isUserNameDisplay: false,
            isPasswordDisplay: false,
            isEmailDisplay: false,
            isDateDisplay: false,
            isQueryUserNameDisplay: false,
            userNamePrompt: '只能是汉字或数字和字母组成3-8位',
            passwordPrompt: '密码只能是字母数字._组成,长度6-16位',
            emailPrompt: '请填写你常用的邮箱',
            datePrompt: '请选择出生日期',
            isUserShow: false,
            isPasswordShow: false,
            isEmailShow: false,
            isDateShow: false,
            disabled: true
         }
      },
      props: {
         fromText: {
            type: Array,
            default() {
               return [
                  {
                     id: 'user',
                     text: '用户名',
                     class: 'input',
                     placeholder: '请输入用户名'
                  }
               ]
            }
         }
      },
      computed: {
         validateArray() {
            return [
               {isUserNameDisplay: this.isUserShow ? true : this.isQueryUserNameDisplay},
               {isPasswordDisplay: this.isPasswordShow},
               {isEmailDisplay: this.isEmailShow},
               {isDateDisplay: this.date === '' ? false : true}
            ]
         },
         isDate() {
            return this.date === '' ? false : true
         }
      },
      mounted() {
      },
      methods: {
         open2() {
            this.$confirm('注册成功, 是否继续?', '提示', {
               confirmButtonText: '返回首页',
               cancelButtonText: '返回登录',
               type: 'success',
               closeOnClickModal: false
            }).then(() => {
               this.$router.push({
                  path: '/'
               })
            }).catch(() => {
               this.$router.push({
                  path: '/login'
               })
            });
         },
         _lastValidate() {
            for (let value of this.validateArray) {
               for (let [key, values] of Object.entries(value)) {
                  if (!values) {
                     this[key] = true
                     this._slider()
                  }
               }
            }
            let lean = ''
            this.validateArray.forEach((itme) => {
               for (let [index, value] of Object.entries(itme)) {
                  lean += value
               }
            })
            console.log(lean.indexOf('false'))
            if (lean.indexOf('false') === -1 && !this.isQueryUserNameDisplay) {
               console.log('进入了')
               this.disabled = false
               lean = ''
            }
            if (this.isQueryUserNameDisplay) {
               this._slider()
            }
         },
         _focus(type) {
            switch (type) {
               case 'user':
                  this.isUserNameDisplay = true
                  break
               case 'password':
                  this.isPasswordDisplay = true
                  break
               case 'email':
                  this.isEmailDisplay = true
                  break
            }
            this._slider()
         },
         _validateUser(type) {
            this._validate({
               type,
               value: this.userName,
               isSuccessShow: 'isUserShow',
               isDisplay: 'isUserNameDisplay',
               Prompt: 'userNamePrompt'
            })
            if (this.isUserShow) {
               this._userExistence()
            }
         },
         _validatePassword(type) {
            console.log(type)
            this._validate({
               type,
               value: this.password,
               isSuccessShow: 'isPasswordShow',
               isDisplay: 'isPasswordDisplay',
               Prompt: 'passwordPrompt'
            })
         },
         _validateEmail(type) {
            this._validate({
               type,
               value: this.email,
               isSuccessShow: 'isEmailShow',
               isDisplay: 'isEmailDisplay',
               Prompt: 'emailPrompt'
            })
         },
         __validateDate() {
            if (this.date === '') {
               this.isDateShow = false
               this.isDateDisplay = true
               return
            }
            this.isDateShow = true
            this.isDateDisplay = false
         },
         _validate({isSuccessShow, isDisplay, Prompt, value, type}) {
            let _validates = validates(value, type)
            this[isSuccessShow] = false
            if (_validates === true) {
               this[isDisplay] = false
               this[isSuccessShow] = true
               return
            }
            this[Prompt] = _validates
         },
         _slider() {
            this.$refs.slider._initElement()
         },
         _sliderEmit() {
            this._lastValidate()
         },
         async _submit() {
            if (this.disabled) return
            this.disabled = true
            let data = await this._initDATA({
               methods: 'post',
               options: {
                  userName: this.userName,
                  password: this.password,
                  email: this.email,
                  date: this.date
               },
               url: '/apis/user/register'
            })
            if (data.data.result ===1 && data.data.success) {
               this.open2()
            }
         },
         async _userExistence() {
            let data = await this._initDATA({
               options: {userName: this.userName},
               methods: 'get',
               url: '/apis/user/queryUserName'
            })
            if (data.data.result === 1) {
               if (!data.data.message) {
                  this.isUserShow = false
                  this.isQueryUserNameDisplay = true
               } else {
                  this.isUserShow = true
                  this.isQueryUserNameDisplay = false
               }
            }
         },
         _initDATA({options, methods, url}) {
            let parameter = ''
            if (methods === 'get') {
               parameter = {params: options}
            } else {
               parameter = options
            }
            let data = this.$axios[methods](url, parameter)
            return data
         }
      }
      ,
      components: {
         MFooter,
         verifgyingSlider,
         model
      }
   }
</script>

<style scoped lang="stylus">
   .log
      width 100%
      height 68px
      .log-img
         height 68px
         width 1200px
         margin 0 auto
         box-sizing border-box
         padding-top 30px
         &::before
            width 110px
            height 20px
            background url("//www3.res.meizu.com/static/cn/_partial/header/images/logo-new_2ea694e.png") no-repeat
            background-size 110px 20px
            display block
            content ""

   .register-content
      width 100%
      height 750px
      .register-img
         background url("//uc-res.mzres.com/resources/uc/wlogin/member/images/banner.png") no-repeat center
         background-size 100%
         width 100%
         height 750px
         display flex
         justify-content center
      .content
         width 1200px
         padding-top 30px
         height auto

   .register
      float right
      box-sizing border-box
      padding 0 10px
      margin-right 60px
      background white
      width 500px
      height 600px
      h1
         letter-spacing 5px
         margin 15px 0
         text-align center
         font-size 20px
         color #04C4F5
      ul
         li
            margin 40px 0
            display flex
            align-items center
            justify-content space-between
            flex-wrap wrap
            .Prompt
               box-sizing border-box
               padding-right 30px
               width 100%
               text-align center
               font-size 14px
               color red
            i
               font-size 12px
               color red
            label
               display block
               width 100px
               text-align left
               font-weight bold
            .input
               width 70%
            .icons
               width 20px
               height 20px
               span
                  width 20px
                  color green

   .btn
      box-sizing border-box
      padding 0 40px
      display flex
      justify-content space-between
      .btn_login
         width 150px

   .slider
      padding 0 40px
      margin-bottom 20px
</style>
